<template>
  <div class="dashboard-container">
    <!-- 内容区域 -->
    <el-card>
      <!-- 操作区域  -->
      <div class="action-view mb20">
        <!-- 绑定按下回车事件 -->
        <el-input
          v-model="orderNo"
          style="width: 18%;margin-right: 10px;"
          size="small"
          suffix-icon="el-icon-search"
          placeholder="请输入订单号"
          @change="getTableData"
        />
        <!-- 通过v-model绑定下拉选择框选择的值【value】 label属性值只作为显示  绑定选择事件 -->
        <el-select v-model="status" style="width: 18%;margin-right: 10px;" size="small" @change="getTableData">
          <el-option value="" label="全部" />
          <!-- v-for循环对象是 item为对象的值  index为对象的属性 -->
          <el-option v-for="item, index in orderStatusText" :key="index" :value="index" :label="item" />
        </el-select>

        <el-button icon="el-icon-s-home" type="primary" size="small" @click="batchAction(1)">配货完成</el-button>
        <el-button icon="el-icon-s-home" type="primary" size="small" @click="batchAction(2)">出库</el-button>
        <el-button icon="el-icon-close" type="danger" size="small" @click="batchAction(3)">关闭订单</el-button>
      </div>
      <!-- 表格区域 -->
      <div class="table-view mb20">
        <el-table :data="tableData" @selection-change="selectTableData = $event">
          <!-- 设置多选框 表格项 -->
          <el-table-column type="selection" />
          <el-table-column label="订单号" prop="orderNo" />
          <el-table-column label="订单总价" prop="totalPrice" />
          <!-- orderStatus  -3 商家取消 -2 系统取消 -1 用户取消  0 待支付 1已支付 2配货完成 3已发货 4已收货 -->
          <el-table-column label="订单状态" prop="orderStatus">
            <template slot-scope="{ row }">{{ orderStatusText[row.orderStatus] }}</template>
          </el-table-column>
          <!-- payType 0未支付 1微信支付 2支付宝支付 -->
          <el-table-column label="支付方式">
            <template slot-scope="{ row }">
              <el-tag v-if="row.payType === 0" type="info" effect="dark">未支付</el-tag>
              <el-tag v-if="row.payType === 1" type="success" effect="dark">微信支付</el-tag>
              <el-tag v-if="row.payType === 2" effect="dark">支付宝支付</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" />
          <el-table-column label="操作" width="220">
            <template slot-scope="{ row }">
              <el-button v-if="row.orderStatus == 1" type="text" @click="checkDone([row.orderId])">备货完成</el-button>
              <el-button v-if="row.orderStatus == 2" type="text" @click="checkOut([row.orderId])">出库</el-button>
              <el-button v-if="row.orderStatus >= 0" type="text" @click="closeOrder([row.orderId])">关闭订单</el-button>
              <el-button type="text">订单详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页区域 默认分页10条一页-->
      <div class="page-view fc">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pagable.total"
          :current-page="pagable.page"
          @current-change="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { orderStatusText } from '@/utils/data_code'

export default {
  name: 'Order',
  data() {
    return {
      // 表格数据
      tableData: [],
      // 选中表格数据
      selectTableData: [],
      // 分页配置
      pagable: {
        page: 1,
        total: 0
      },
      // 订单号
      orderNo: '',
      // 订单状态
      status: '',
      // 订单状态码
      orderStatusText
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    // 获取数据
    async getTableData() {
      const { page } = this.pagable
      // 1. 发起请求  pageNumber 页码  pageSize 每页条数 orderStatus 订单状态 orderNo 订单号
      const params = { pageNumber: page, pageSize: 10, orderStatus: this.status, orderNo: this.orderNo }
      const { data } = await this.$http.get('/orders', { params })
      console.log(data)
      // 2. 将请求结果渲染到页面中
      this.tableData = data.list
      this.pagable.total = data.totalCount
    },
    // 页码更改
    pageChange(page) {
      // 更改data中的页码
      this.pagable.page = page
      // 获取数据
      this.getTableData()
    },
    // 备货完成
    async checkDone(ids) {
      // 1. 发起请求
      await this.$http.put('/orders/checkDone', { ids })
      // 2. 提示
      this.$message.success('操作成功')
      // 3. 更新表格
      this.getTableData()
    },
    // 出库
    async checkOut(ids) {
      // 1. 发起请求
      await this.$http.put('/orders/checkOut', { ids })
      // 2. 提示
      this.$message.success('操作成功')
      // 3. 更新表格
      this.getTableData()
    },
    // 关闭
    async closeOrder(ids) {
      // 1. 发起请求
      await this.$http.put('/orders/close', { ids })
      // 2. 提示
      this.$message.success('操作成功')
      // 3. 更新表格
      this.getTableData()
    },
    // 批量操作
    batchAction(type) {
      // 判断是否选择订单
      if (!this.selectTableData.length) return this.$message.error('请选择项目！！！')
      // 处理选择订单项 -> [id, id]
      const ids = this.selectTableData.map(item => item.orderId)
      // 判断当前操作类型
      if (type === 1) {
        this.checkDone(ids)
      } else if (type === 2) {
        this.checkOut(ids)
      } else if (type === 3) {
        this.closeOrder(ids)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.action-view {
  overflow: hidden;
}
.goodsCover {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
</style>
